<template>
	<view class="content">
		<svg
			version="1.1"
			xmlns="http://www.w3.org/2000/svg"
			xmlns:xlink="http://www.w3.org/1999/xlink"
			x="0px"
			y="0px"
			width="100%"
			height="100%"
			viewBox="0 0 1600 900"
			preserveAspectRatio="xMidYMax slice"
		>
			<defs>
				<linearGradient id="bg">
					<stop offset="0%" style="stop-color: rgba(130, 158, 249, 0.06)"></stop>
					<stop offset="50%" style="stop-color: rgba(76, 190, 255, 0.6)"></stop>
					<stop offset="100%" style="stop-color: rgba(115, 209, 72, 0.2)"></stop>
				</linearGradient>
				<path
					id="wave"
					fill="url(#bg)"
					d="M-363.852,502.589c0,0,236.988-41.997,505.475,0
          s371.981,38.998,575.971,0s293.985-39.278,505.474,5.859s493.475,48.368,716.963-4.995v560.106H-363.852V502.589z"
				/>
			</defs>
			<g>
				<use xlink:href="#wave" opacity=".3">
					<animateTransform
						attributeName="transform"
						attributeType="XML"
						type="translate"
						dur="10s"
						calcMode="spline"
						values="270 230; -334 180; 270 230"
						keyTimes="0; .5; 1"
						keySplines="0.42, 0, 0.58, 1.0;0.42, 0, 0.58, 1.0"
						repeatCount="indefinite"
					/>
				</use>
				<use xlink:href="#wave" opacity=".6">
					<animateTransform
						attributeName="transform"
						attributeType="XML"
						type="translate"
						dur="8s"
						calcMode="spline"
						values="-270 230;243 220;-270 230"
						keyTimes="0; .6; 1"
						keySplines="0.42, 0, 0.58, 1.0;0.42, 0, 0.58, 1.0"
						repeatCount="indefinite"
					/>
				</use>
				<use xlink:href="#wave" opacty=".9">
					<animateTransform
						attributeName="transform"
						attributeType="XML"
						type="translate"
						dur="6s"
						calcMode="spline"
						values="0 230;-140 200;0 230"
						keyTimes="0; .4; 1"
						keySplines="0.42, 0, 0.58, 1.0;0.42, 0, 0.58, 1.0"
						repeatCount="indefinite"
					/>
				</use>
			</g>
		</svg>

		<view class="loginBox">
			<h3 style="text-align: center; margin-bottom: 120rpx">欢迎登录 云监工</h3>
			<view class="inputBox">
				<view class="ipt">
					<u-input type="text" v-model="username" placeholder="请输入账号" />
				</view>
				<view class="ipt">
					<u-input type="password" v-model="password" placeholder="请输入密码" />
				</view>
				<view class="ipt">
					<u-input type="text" v-model="code" placeholder="请输入验证码">
						<template slot="suffix">
							<u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒重新获取"></u-code>
							<u-button @tap="getCode" :text="tips" type="primary" size="mini"></u-button>
						</template>
					</u-input>
				</view>
				<u-button @click="handleLogin" type="primary">登录</u-button>
				<!-- <view class="forgetPwd">
          <span>忘记密码</span>
          <span>没有账号，去注册</span>
        </view> -->
			</view>
		</view>
	</view>
</template>

<script>
import { getNumberCode } from '../../api/index/index.js';
export default {
	data() {
		return {
			username: '',
			password: '',
			code: '',
			tips: '',
			value: ''
		};
	},
	methods: {
		codeChange(text) {
			this.tips = text;
		},
		getCode() {
			if (this.$refs.uCode.canGetCode) {
				// 模拟向后端请求验证码
				uni.showLoading({
					title: '正在获取验证码'
				});

				getNumberCode({
					phone: 13337211791
				})
					.then((res) => {
						console.log(res);

						uni.showToast({
							icon: 'none',
							title: res.msg
						});
					})
					.catch((err) => {
						console.log(222, err);
					});

				setTimeout(() => {
					uni.hideLoading();
					// 这里此提示会被this.start()方法中的提示覆盖
					uni.$u.toast('验证码请求已发送');
					// 通知验证码组件内部开始倒计时
					this.$refs.uCode.start();
				}, 500);
			} else {
				uni.$u.toast('倒计时结束后再发送');
			}
		},
		change(e) {
			console.log('change', e);
		},
		handleLogin() {}
	}
};
</script>

<style scoped>
svg {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 40%;
	box-sizing: border-box;
	display: block;
	background-color: #ffffff;
}

.loginBox {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -60%);
	width: 90%;
	border-radius: 20rpx;
	padding: 60rpx;
	box-sizing: border-box;
}
h3 {
	color: rgb(66, 157, 250);
	font-size: 40rpx;
	letter-spacing: 10rpx;
	margin-bottom: 40rpx;
}
.inputBox {
}
.ipt {
	height: 86rpx;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	margin-bottom: 40rpx;
	background-color: #f5f5f5;
	border-radius: 10rpx;
	padding-left: 10rpx;
}
.ipt input {
	margin-left: 20rpx;
	font-size: 28rpx;
}
.ipt input {
	margin-left: 20rpx;
}
.forgetPwd {
	margin-top: 30rpx;
	font-size: 26rpx;
	color: #b5b5b5;
	text-align: end;
	padding: 0 10rpx;
	display: flex;
	justify-content: space-between;
}
u-button {
	margin-top: 20rpx;
	line-height: 85rpx;
	text-align: center;
	background: rgb(66, 157, 250);
	border-radius: 40rpx;
	color: #fff;
	margin-top: 40rpx;
}

.yzm {
	text-align: end;
	font-size: 24rpx;
	background: linear-gradient(to right, rgb(66, 157, 250), rgb(0, 170, 127));
	height: 60rpx;
	width: 150rpx;
	line-height: 60rpx;
	text-align: center;
	border-radius: 10rpx;
	color: #fff;
}
</style>
